<template>
  <div class="session-wrap">
  <!--    <el-dialog
      title="占位单图"
      :visible.sync="MoreMapDialogVisible"
      width="40%"
      :show-close="false"
      :close-on-click-modal="false"> -->
      <div style="text-align: left; width: 400px;">
        <el-form :label-position="labelPosition" >
          <el-form-item label="左侧图片：">
            <el-upload
              :action="imgUpload"
              :file-list="leftLileList"
              list-type="picture"
              :on-success="singlSuccess"
              :on-remove="handleRemove"
              :limit="2">
              <!-- <i class="el-icon-plus"></i> -->
              <el-button size="small" type="primary">点击上传</el-button>
              <!-- <el-input  size="mini" style="width:600px;"> -->
            </el-upload>
          </el-form-item>
          <el-form-item
            label="左侧图片的链接："
            class="mt20"
          >
            <el-input v-model="moduleInfo.leftBackUrl" placeholder="请输入链接地址" width="60%"></el-input>
          </el-form-item>
          <el-form-item label="右侧图片：">
            <el-upload
              :action="imgUpload"
              :file-list="rightFileList"
              list-type="picture"
              :on-success="singlRightSuccess"
              :on-remove="handleRightRemove"
              :limit="1">
              <!-- <i class="el-icon-plus"></i> -->
              <el-button size="small" type="primary">点击上传</el-button>
              <!-- <el-input  size="mini" style="width:600px;"> -->
            </el-upload>
          </el-form-item>
          <el-form-item
            label="右侧图片的链接："
            class="mt20"
          >
            <el-input v-model="moduleInfo.rightBackUrl" placeholder="请输入链接地址" width="60%"></el-input>
          </el-form-item>
          
      </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="close()" size="mini">取消</el-button>
          <el-button type="primary" @click="saveSinglEMapConf" size="mini">确定</el-button>
        </div>
      </div>
    <!-- </el-dialog> -->
  </div>
</template>
<script>
  // 引入资源
  export default {
    name: 'session',
    props: {
      moduleId: {
        type: String
      },
      singlList: {
        type: Array,
        default: []
      },
      MoreMapDialogVisible:{
        type:Boolean
      }

    },
    data() {
      return {
        leftLileList:[],
        rightFileList:[],
        butomRightFileList:[],
        butomLeftFileList:[],
        imgUpload: this.utils.imgUploadUrl,          // 上传图片地址
        dialogVisible: false,                                         // 是否显示查看图片
        labelPosition:"right",
        moduleInfo:{
          "leftUrl":null,
          "rightUrl":null,
        },
      }
    },

    methods: {

      // 上传图片保存信息
      saveSinglEMapConf(){
        let this_ = this;
        if(this.leftLileList && this.leftLileList.length > 0){
          this.moduleInfo.leftUrl = this.leftLileList[0].url;
        }
        if(this.rightFileList && this.rightFileList.length > 0){
          this.moduleInfo.rightUrl = this.rightFileList[0].url;
        }
        let list = new Array(this.moduleInfo);
        
        this_.utils.request.cmsPageModuleAddModuleData({templateDataType:0,moduleId:this_.moduleId,variablesObject:list,platform:1},res=>{
          if(res.code === "0000"){
            // this.MoreMapDialogVisible=false
//            this_.singlList = [];
            // this_.$emit('MoreMapDialogVisibleFun');
            this_.$emit('getIndex');//从父页面发射指令给子页面;
            this_.$message({"message":"保存成功",type:"success"});
          }else{
            this_.$message({"message":res.msg,type:"error"});
          }
        })
      },

      // 删除已上传的图片  handleRemove
      handleRemove(file, fileList) {
        if(fileList && fileList.length>0){
          this.leftLileList = fileList;
        }else{
          this.leftLileList=[];
        }
        this.$emit('getIndex');//从父页面发射指令给子页面;
      },
      // 上传成功后回调
      singlSuccess(file){
        this.leftLileList.push({url:file.data.imgUrl,backUrl:''})
        // this.$emit('getIndex');//从父页面发射指令给子页面;
      },
      // 删除已上传的图片  handleRemove
      handleRightRemove(file, fileList) {
        if(fileList && fileList.length>0){
          this.rightFileList = fileList;
        }else{
          this.rightFileList=[];
        }
        this.$emit('getIndex');//从父页面发射指令给子页面;
      },
      // 上传成功后回调
      singlRightSuccess(file){
        this.rightFileList.push({url:file.data.imgUrl,backUrl:''})
        // this.$emit('getIndex');//从父页面发射指令给子页面;
      },
      close(){
        // this.MoreMapDialogVisible=false
        this.$router.push("/Pages/Configuration/Cms/CmsPages");
      }

    },

    mounted() {
      if(this.singlList && this.singlList.length > 0){
        this.moduleInfo = this.singlList[0];
        if(this.moduleInfo.leftUrl){
          this.leftLileList = [{url:this.moduleInfo.leftUrl}];
        }else{
          this.leftLileList = [];
        }
        if(this.moduleInfo.rightUrl){
          this.rightFileList = [{url:this.moduleInfo.rightUrl}];
        }else{
          this.rightFileList = [];
        }
      }else{
        this.leftLileList = [];
        this.rightFileList = [];
      }
      
    },
  }
</script>
<style lang="scss" scoped>
  .dialog-footer{
    margin-top: 20px
  }
  .session-wrap {
    width: 100%;
    height: auto;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 10px;
    .session-image-wrap {
      width: 100%;
      height: 125px;
      margin-bottom: 10px;
      .session-image {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
